<template>
  <view class="container">
    <view class="grid-container">
      <view class="grid-item">
        <u-avatar
          size="55"
          :src="
            userInfo && userInfo.FAvatarUrl
              ? userInfo.FAvatarUrl
              : '/static/images/user_pic.png'
          "
        />
      </view>
      <view class="grid-item grid-login" v-if="!hasLogin" v-on:tap="onLC"
        >立即登录</view
      >
      <view class="grid-item grid-has-login" v-else>
        <view class="nickname">{{ memberInfo[0].NiName }}</view>
        <view class="phone">{{
          memberInfo[0].Number.slice(0, 3) +
          "****" +
          memberInfo[0].Number.slice(7)
        }}</view>
      </view>
    </view>

    <view class="m-c">
      <view class="i">
        <view class="t">0</view>
        <view class="v">积分</view>
      </view>
      <view class="i">
        <view class="t">0</view>
        <view class="v">会员余额</view>
      </view>
      <view class="i">
        <view class="t" v-on:tap="onCC">{{ m_couponList.length }}</view>
        <view class="v" v-on:tap="onCC">优惠券</view>
      </view>
      <view class="i">
        <view class="t" v-on:tap="onCKC">{{ cardNumber || 0 }}</view>
        <view class="v" v-on:tap="onCKC">次卡</view>
      </view>
    </view>
    <!-- order list -->
    <view class="o-c">
      <view class="o-h">我的订单</view>
      <view class="o-is">
        <view
          class="o-i"
          v-for="i in [
            {
              m_icon: `/static/images/my/dfk.png`,
              m_name: `待付款`,
              m_value: `1`,
            },
            {
              m_icon: `/static/images/my/dfh.png`,
              m_name: `待发货`,
              m_value: `2`,
            },
            {
              m_icon: `/static/images/my/dsh.png`,
              m_name: `待收货`,
              m_value: `3`,
            },
            {
              m_icon: `/static/images/my/tksh.png`,
              m_name: `退款售后`,
              m_value: `4`,
            },
          ]"
          :key="i.m_value"
          v-on:tap="onOC(i.m_value)"
        >
          <view>
            <image class="img" :src="i.m_icon" mode="widthFix" />
          </view>
          <view>{{ i.m_name }}</view>
        </view>
      </view>
    </view>

    <!-- tabs -->
    <view class="tabs">
      <u-cell-group>
        <u-cell
          v-for="(item, index) in [
            {
              title: `会员充值`,
              page: `/pages/member/deposit`,
            },
            {
              title: ` 次卡购买`,
              page: `/pages/coupon/timeCard`,
            },
            {
              title: `次卡结存`,
              page: `/pages/coupon/timeCardRecord`,
            },
            {
              title: `优惠券`,
              page: `/pages/coupon/MyCoupons`,
            },
            {
              title: `收货地址`,
              page: `/pages/user/address/address`,
            },
            {
              title: `充值明细`,
              page: `/pages/member/detail`,
            },
            {
              title: `积分明细`,
              page: `/pages/user/point/pointRecord`,
            },
            {
              title: `完善资料`,
              page: `/pages/userinfoSet/userinfoSet`,
            },
          ]"
          :key="index"
          :isLink="true"
          @click="onCellClick(item.page)"
        >
          <template #title>
            <view>
              {{ item.title }}
            </view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>

    <li-tab-bar :curIdx="4" />
  </view>
</template>

<script>
import { ref } from "@vue/composition-api";
import {
  uGetStorageSync,
  uNavigateTo,
  uSetStorageSync,
} from "../../utils/uniUtils";
import { reqPost } from "../../common/http.request";
import { useUser } from "../../store/useUser";

export default {
  name: "Setting",
  async onShow() {
    this.userInfo = uGetStorageSync("userInfo");
    this.memberInfo = uGetStorageSync("Members");
    await this.GetPageList();
  },
  methods: {
    onCKC() {
      uNavigateTo("/pages/coupon/timeCardRecord");
    },
  },
  setup() {
    const userInfo = ref([]);
    const baseList = ref([
      {
        list: [
          {
            icon: "/static/images/icon-member.png",
            title: "会员中心",
            route: "/pages/member/MemberIndex",
          },
          {
            icon: "/static/images/icon-address.png",
            title: "收货地址",
            route: "/pages/user/address/address",
          },
          {
            icon: "/static/images/icon-my-coupon.png",
            title: "我的优惠券",
            route: "/pages/coupon/MyCoupons",
          },
        ],
      },
    ]);
    const m_couponList = ref([]);
    const m_type = ref(0);
    const MemberId =
      uGetStorageSync("LoginID") == 1
        ? uGetStorageSync("Members")[0]?.MemberId
        : 0;
    const hasLogin = ref(false);
    hasLogin.value = uGetStorageSync("LoginID") == 1;
    const memberInfo = ref(uGetStorageSync("Members"));
    const cardNumber = ref(0);

    async function GetPageList() {
      console.log("GetPageList");
      hasLogin.value = (uGetStorageSync("LoginID") || 0) == 1;
      if (!hasLogin.value) {
        return;
      }

      const { Data } = await reqPost("GetCouponList", {
        MemberId,
        type: m_type.value,
      });
      m_couponList.value = Data;

      try {
        const res = await reqPost("MemberTimeList");
        let number = 0;
        res.Data.forEach((item) => {
          if (item.StatusDesc == "已过期") {
          } else {
            number += item.LiveTime;
          }
        });
        useUser().cardNumber = number;
        cardNumber.value = number;
      } catch (err) {
        console.log("error", err);
      }
    }

    function onLC() {
      uNavigateTo("/pages/login/login");
      /*
      if (uGetStorageSync("hasBindStore")) {
      } else {
        uToast("未绑定店铺~", "error");
      }
         */
    }

    function onCC() {
      uNavigateTo("/pages/coupon/MyCoupons");
    }

    function onOC(v) {
      uNavigateTo("/pages/order/OrderList?l=" + v);
    }

    function logout() {
      uSetStorageSync("LoginID", 0);
      // useUser().hasLogin = false;
    }

    function goto(url) {
      uNavigateTo(url);
    }

    function onCellClick(url) {
      uNavigateTo(url);
    }

    return {
      m_couponList,
      hasLogin,
      onLC,
      onCC,
      onOC,
      GetPageList,
      memberInfo,
      logout,
      cardNumber,
      goto,
      onCellClick,
      userInfo,
      baseList,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "./scss/my.scss";
@import "/static/css/iconfont.css";
</style>
